/*
 * @Author: yangzonglong
 * @Date: 2021-06-30 15:14:10
 * @version: v1.0.0
 * @Descripttion: Upload 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-02-15 16:51:32
 * @Auditor:
 */
import React, { useState, useCallback } from 'react';
import { Dropdown, Menu, Form, Checkbox } from 'antd';
import { Select } from '@library';
import { valueType } from 'antd/lib/statistic/utils';
import classnames from 'classnames';
import { SketchPicker } from 'react-color';
import update from 'immutability-helper';
import { OrderNumberProps } from './OrderNumber';
import useControlOptions from '../../hooks/useControlOptions';
import FormItemController from './../components/FormItemController';
import Icon from './../icon/Icon';
import style from './../text/text.module.scss';

const FormItem = Form.Item;
const fieldNames = {
  value: 'ruleCode',
  label: 'ruleCodeName'
}
const query = { where: {} },
  MenuItem = Menu.Item;

  const fontSizeData = [
    { value: '12px', label: 'Small', height: 36, lineHeight: '20px' },
    { value: '14px', label: 'Normal', height: 38, lineHeight: '22px' },
    { value: '18px', label: 'Middle', height: 40, lineHeight: '26px' },
    { value: '28px', label: 'Large', height: 42, lineHeight: '36px' },
    { value: '38px', label: 'Huge', height: 52, lineHeight: '46px' },
  ];
  
  const textAlignData = [
    { value: 'left', label: '左对齐', icon: <Icon icon="&#xe66d;" /> },
    { value: 'center', label: '居中对齐', icon: <Icon icon="&#xe66a;" /> },
    { value: 'right', label: '右对齐', icon: <Icon icon="&#xe66b;" /> },
    { value: 'justify', label: '两端对齐', icon: <Icon icon="&#xe670;" /> },
  ];

const OrderNumberController = () => {
  const { options, changeFormItemProps, changeControlProps } = useControlOptions<OrderNumberProps>('orderNumberProps');

  const [alignIcon, setAlignIcon] = useState(<Icon icon="&#xe66d;" />);
  const fontWeight = options.style?.fontWeight;
  const fontStyle = options.style?.fontStyle;
  const fontSize = options.style?.fontSize;
  const fontColor = options.style?.color;

  const changeStyle = useCallback(
    (newStyle: React.CSSProperties) => {
      changeControlProps(
        'style',
        update(options.style || {}, {
          $merge: newStyle,
        }),
        true
      );
    },
    [changeControlProps, options.style]
  );

  const onSelect = (ruleCode: valueType | undefined) => {
    changeControlProps('orderNumberProps',
      { ruleCode, customStyleFlag: options.orderNumberProps?.customStyleFlag },
      true)
  }

  const changeCustomStyleFlag = (checked: boolean) => {
    changeControlProps('orderNumberProps',
      { customStyleFlag: checked, ruleCode: options.orderNumberProps?.ruleCode },
      true)
  }

  const setFontColor = useCallback(
    (color: string) => {
      changeStyle({ color });
    },
    [changeStyle]
  );

  const setTextAlign = useCallback(
    ({ key }) => {
      changeStyle({ textAlign: key });
    },
    [changeStyle]
  );

  const setFontSize = useCallback(
    ({ key }) => {
      const curFontSize = fontSizeData.find((item) => item.value === key);

      changeStyle({
        fontSize: curFontSize?.value,
        lineHeight: curFontSize?.lineHeight,
      });
    },
    [changeStyle]
  );

  const setFontBold = useCallback(() => {
    changeStyle({ fontWeight: fontWeight === 'bold' ? 'normal' : 'bold' });
  }, [changeStyle, fontWeight]);

  const setFontStyle = useCallback(() => {
    changeStyle({ fontStyle: fontStyle === 'italic' ? 'normal' : 'italic' });
  }, [changeStyle, fontStyle]);
  
  return (
    <FormItemController
      hidePlaceholder
      hideInitialValue
      hideRequired
      onChange={changeFormItemProps}
      options={options.formItemProps}>
      <FormItem label="编码规则">
        <Select
          url='/bk/api/coding/RuleDef/find'
          allowClear
          value={options.orderNumberProps?.ruleCode}
          onClear={() => onSelect(undefined)}
          onSelect={onSelect}
          fieldNames={fieldNames}
          query={query}
          placeholder="请选择编码规则"
        />
      </FormItem>

      <FormItem className="antd-form-item-row" label='自定义样式'>
        <Checkbox 
          checked={options.orderNumberProps?.customStyleFlag} 
          onChange={e => changeCustomStyleFlag(e.target.checked)}/>
      </FormItem>

      <span className={style.span}>样式</span>
      <div className={style.box} style={{ borderBottom: 0 }}>
        <div className={style.toolbar}>
          <Icon className={classnames({ [style.on]: fontWeight === 'bold' }, style.w28, style.hover)} onClick={setFontBold} icon="&#xe66c;" />
          <Icon icon="&#xe66f;" className={classnames({ [style.on]: fontStyle === 'italic' }, style.w28, style.hover)} onClick={setFontStyle} />
          <Dropdown
            trigger={['click']}
            className={style.normal}
            overlay={
              <Menu onClick={setFontSize}>
                {fontSizeData.map((item) => (
                  <MenuItem key={item.value} style={{ padding: '0 12px', lineHeight: item.height + 'px' }}>
                    <span style={{ fontSize: item.value, display: 'block' }}>{item.label}</span>
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '74px' }} className={style.hover}>
              {fontSizeData.find((item) => item.value === fontSize)?.label || 'normal'}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={<SketchPicker onChange={(color) => setFontColor(color.hex.toLocaleUpperCase())} color={fontColor} />}
          >
            <div style={{ width: '42px' }} className={style.hover}>
              <Icon icon="&#xe66e;" />
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>

          <Dropdown
            placement="bottomRight"
            trigger={['click']}
            overlay={
              <Menu onClick={setTextAlign}>
                {textAlignData.map((item) => (
                  <MenuItem
                    onClick={() => setAlignIcon(item.icon)}
                    icon={item.icon}
                    style={{ padding: '0 12px', lineHeight: '36px' }}
                    key={item.value}
                  >
                    {item.label}
                  </MenuItem>
                ))}
              </Menu>
            }
          >
            <div style={{ width: '42px' }} className={style.hover}>
              {alignIcon}
              <Icon icon="&#xe673;" />
            </div>
          </Dropdown>
        </div>

        {/* <TextArea placeholder="请输入描述文字" autoSize={autoSize} onChange={onChangeText} value={options?.textProps?.text} bordered={false} /> */}
      </div>
    </FormItemController>
  );
};

export default OrderNumberController;
